<template>
  <div
    class="page-sheet page-content"
    :contenteditable="isBlockOrCollect && (propsData.title != '强度分析' && editContentType==='template')"
    :data-page-id="propsData.pageId"
    :data-layout="propsData.pageLayout"
  >
    <!-- 结构化块和收藏页面没有页眉和页脚 -->
    <PageHeader v-if="!isBlockOrCollect && !container">
      <template v-slot:page-number>
        <div class="page-number" data-total="1"></div>
      </template>
    </PageHeader>
    <!-- 结构化块和收藏页面 block||collect -->
    <div
      v-if="isBlockOrCollect"
      class="page_body block_page"
      :data-page-body-id="propsData.pageId"
    >
      <template v-if="blockList.length">
        <component
          v-for="(item, index) of blockList"
          :is="getComponentName(item)"
          :key="item.blockId + index"
          :blockData="item"
          :container="container"
        />
      </template>
      <p
        v-if="!blockList.length"
        data-type="paragraph"
        :data-id="dataId"
        :data-block-id="blockId"
      >
        <br data-mce-bogus="1" />
      </p>
    </div>

    <!-- 一般的正文页面 document或template -->
    <div
      class="page_body irremovable"
      :data-type="propsData.dataType === 'blank_page' ? 'blank_page' : ''"
      :data-block-id="
        propsData.dataType === 'blank_page'
          ? propsData.blockList[0].blockId
          : ''
      "
      :data-page-body-id="
        propsData.dataType === 'blank_page' ? propsData.pageId : ''
      "
      :contenteditable="chapterContenteditable"
      v-if="!isBlockOrCollect"
    >
      <Paragraph
        v-if="propsData.dataType !== 'blank_page'"
        class="list-title irremovable"
        :contenteditable="computedContenteditable"
        :blockData="propsData.blockList[0]"
        :variableId="propsData.variableId"
      />
      <Paragraph
        v-for="(item, index) of defaultBlockList"
        class="noneditable irremovable"
        :contenteditable="chapterContenteditable"
        :key="item.blockId + index"
        :blockData="item"
      />
      <template v-if="blockList.length">
        <component
          v-for="(item, index) of blockList"
          :is="getComponentName(item)"
          :key="item.blockId + index"
          :blockData="item"
          :contenteditable="
            chapterContenteditable &&
            item.dataType !== 'formula' &&
            item.dataType !== 'abbreviation' &&
            item.dataType !== 'naked_figure' &&
            item.dataType !== 'terms'
          "
          :container="container"
        />
      </template>
      <p
        v-if="!blockList.length"
        data-type="paragraph"
        :data-id="dataId"
        :data-block-id="blockId"
      >
        <br data-mce-bogus="1" />
      </p>
    </div>
    <Footnote :footnotes="footnotes" />
    <!-- 结构化块页面和收藏没有页眉和页脚 -->
    <PageFooter v-if="!isBlockOrCollect && !container" />
  </div>
</template>

<script>
import PageHeader from "../PageHeader.vue";
import PageFooter from "../PageFooter.vue";
import Paragraph from "../blocks/Paragraph.vue";
import EditorTable from "../blocks/Table.vue";
import EditorFigure from "../blocks/Figure.vue";
import EditorFormula from "../blocks/Formula.vue";
import EditorAbbreviation from "../blocks/Abbr.vue";
import Example from "../blocks/Example.vue";
import NakedFigure from "../blocks/NakedFigure.vue";
import ItemNote from "../blocks/ItemNote.vue";
import Endline from "../blocks/Endline.vue";
import ItemList from "../blocks/ItemList.vue";
import TermBlock from "../blocks/TermBlock.vue";
import BlockGroup from "../blocks/BlockGroup.vue";
import ImageBlock from "../blocks/span/ImageBlock.vue";

import { getComponentName, groupBlockList } from "@/utils/helpers";
import Footnote from "../Footnote.vue";
import { allContentTypes, defaultDataTypes } from "@/constants/structure";
import { nrZh, nrEn, nrZhStarter, nrEnStarter } from "@/constants/string";
import { v4 as uuid } from "uuid";
import { mapGetters } from "vuex";

export default {
  components: {
    PageHeader,
    PageFooter,
    Footnote,
    EditorTable,
    EditorFigure,
    EditorFormula,
    EditorAbbreviation,
    Example,
    NakedFigure,
    ItemNote,
    Endline,
    BlockGroup,
    ItemList,
    TermBlock,
    Paragraph,
    ImageBlock,
  },
  props: {
    container: { type: String, default: "" },
    contenteditable: {
      type: Boolean,
      default: true,
    },
    propsData: {
      type: Object,
      default: () => ({}),
    },
  },
  provide() {
    return {
      pageType: this.propsData.dataType,
    };
  },
  data() {
    return {
      defaultBlockList: [],
      dataId: uuid(),
      blockId: uuid(),
    };
  },
  methods: { getComponentName },
  computed: {
    ...mapGetters(["editContentType", "isTermDoc"]),
    isBlockOrCollect() {
      return ["block", "collect"].some((i) => i === this.editContentType);
    },
    chapterContenteditable() {
      // 1. 不能编辑的页面: 引用文件，缩略语
      if (
        ["normative_references", "symbols_abbreviation"].includes(
          this.propsData.dataType
        )
      )
        return false;
      // 2. 部分条件下不可编辑的页面：普通文档（非术语文档）的术语章节
      if (!this.isTermDoc && this.propsData.dataType === "terms_definitions")
        return false;
      if (this.propsData.title === "强度分析" && this.editContentType==='template') {
        return false;
      }
       // 3. 其他默认情况下均可以编辑
      return true;
    },
    computedContenteditable() {
      if (this.propsData.dataType === "blank_page") {
        return this.contenteditable;
      }
      if (this.propsData.title === "强度分析" && this.editContentType==='template') {
        return false;
      }
      return (
        this.contenteditable &&
        !defaultDataTypes.includes(this.propsData.dataType)
      );
    },
    blockList() {
      const list = this.propsData.blockList.filter(
        (item) => !allContentTypes.includes(item.dataType)
      );
      return this.isBlockOrCollect ? list : groupBlockList(list);
    },
    footnotes() {
      // 条文脚注
      let footnotes = [];
      this.propsData.blockList?.forEach((blockData) => {
        if (blockData.dataType === "paragraph") {
          blockData.textData?.contentList?.forEach?.((node, i) => {
            if (node.contentType === "footnote") {
              footnotes.push({
                ...node,
              });
            }
          });
        }
      });
      return footnotes;
    },
  },
  mounted() {
    if (this.propsData.dataType === "normative_references") {
      if (this.$store.state.xmleditor.docSource === 2) {
        console.debug("---来自文件解析，不自动生成引导语---");
        return;
      }
      const blockZh = this.propsData.blockList.find((i) =>
        i.textData?.contentList?.[0]?.fullContent.startsWith(nrZhStarter)
      );
      if (!blockZh) {
        this.defaultBlockList = [
          {
            blockId: uuid(),
            dataType: "paragraph",
            textData: {
              dataId: uuid(),
              contentList: [
                {
                  content: nrZh,
                  fullContent: nrZh,
                },
              ],
            },
          },
        ];
      }
      if (this.$store.getters.languageType === "both") {
        const blockEn = this.propsData.blockList.find((i) =>
          i.textData?.contentList?.[0]?.fullContent.startsWith(nrEnStarter)
        );
        if (!blockEn) {
          this.defaultBlockList.push({
            blockId: uuid(),
            dataType: "paragraph",
            textData: {
              dataId: uuid(),
              dataLang: "en",
              contentList: [
                {
                  content: nrEn,
                  fullContent: nrEn,
                },
              ],
            },
          });
        }
      }
    }
  },
};
</script>
